<template>
  <div class="register" :class="{ 'is-mobile': $isMobile }">
    <!-- <div class="register-bg">
      <img src="./assets/bg.png" alt="中国企业家管理协会" />
    </div> -->
    <div class="register-form">
      <div class="register-form__title">用户注册</div>
      <div class="register-form__form">
        <el-form>
          <el-form-item label="姓名：" required>
            <el-input size="mini" v-model="loginForm.name" placeholder="请输入姓名 "></el-input>
          </el-form-item>

          <el-form-item label="手机号/邮箱：" required>
            <el-input size="mini" v-model="loginForm.account" placeholder="请输入手机号/邮箱 " autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="身份证：" required>
            <el-input size="mini" v-model="loginForm.idNumber" placeholder="请输入身份证" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" required>
            <el-select v-model="loginForm.gender" size="mini">
              <el-option v-for="item in genderList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>


          <el-form-item label="证件照 / 头像" required>
            <upload-picture :url.sync="loginForm.avatar" prefix="user/avatar" class="upload-avatar">
              <div>建议图片长宽比为 1:1</div>
            </upload-picture>
          </el-form-item>


          <el-form-item label="密码" required>
            <el-input size="mini" type="password" v-model="loginForm.password" show-password placeholder="请输入密码"
              autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="二次确认密码" required>
            <el-input size="mini" type="password" v-model="loginForm.password2" show-password placeholder="请输入密码"
              autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm" class="form-btn">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validateInput } from "@/utils/validate";
import { setToken, setUser } from "@/utils/auth";

export default {
  data() {
    return {
      genderList: [
        { value: "男", label: "男" },
        { value: "女", label: "女" },
      ],
      loginForm: {
        gender: "男",
        account: "",
        name: "",
        idNumber: "",
        avatar: "",
        password: "",
        password2: "",
      }
    };
  },

  methods: {
    async submitForm() {



      const { name, account, password, password2, idNumber, gender } = this.loginForm;
      let rules = [
        {
          case: !name,
          message: "请输入姓名",
        },
        {
          case: !account,
          message: "请输入手机号或者邮箱",
        },
        {
          case: !gender,
          message: "请选择性别",
        },
        {
          case: !idNumber,
          message: "请输入身份证",
        },

        {
          case: !gender,
          message: "请上传证件照",
        },
        {
          case: !password,
          message: "密码长度至少为6位",
        },
        {
          case: password.length < 6,
          message: "请输入密码",
        },

        {
          case: password !== password2,
          message: "两次密码不一致",
        },
        {
          case: !(/^(\d{11})|([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(account)),
          message: "请输入有效的手机号或邮箱",
        },

      ]


      const valid = this.$validForm(rules)

      if (!valid) {
        return
      }


      this.loading = true;
      const { data, code } = await this.$fetch.post("/api/user/register", this.loginForm);
      this.loading = false;
      if (code === 0) {
        const { token } = data;
        setToken(token);
        setUser(data);
        this.$emit("refresh")
      }
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  height: max-content;
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border-radius: 8px;


  ::v-deep .el-input {
    .el-input__inner {
      border-radius: 4px;
      border: 1px solid #d8d8d8;
    }
  }



  
  ::v-deep .el-form-item {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;

    .el-form-item__label {
      text-align: left;
    }
  
  }
  
  ::v-deep .el-form-item__label {
    line-height: 1;
    padding: 0;
    padding-bottom: 5px;
  }
  

}



.register-bg {
  .img {
    width: max-content;
    height: max-content;
  }
}

.register-form {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;

  .register-form__title {
    margin-bottom: 20px;
    width: 120px;
    height: 42px;
    color: rgba(51, 51, 51, 1);
    font-size: 30px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    line-height: 42px;
  }

  .register-form__form {
    width: 400px;
  }

  .form-btn {
    width: 100%;
    height: 44px;
    background: #3560ab;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
  }
}

.tips {
  display: flex;
  justify-content: space-between;
  color: #484848;
}

.upload-avatar {
  padding-top: 8px;
  ::v-deep .el-upload-dragger {
    width: 150px;
    height: 150px;
  }
}

.register.is-mobile {

  .register-form__form {
    width: 100%;
  }
}
</style>
